import { Button, Collapse, InputNumber, Space } from "antd";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import React, { useState } from "react";

export function LayoutProps() {
  const [layoutConfig, setLayoutConfig] = useState<{
    width: number | undefined;
    space: number;
  }>({
    width: undefined,
    space: 30,
  });
  const panelStyle: React.CSSProperties = {
    borderRadius: 0,
  };
  const handleLayout = () => {
    let activePens = window.meta2d.store.data.pens.filter(
      (v) => v?.calculative?.active,
    );
    let pens = activePens.length <= 0 ? undefined : activePens;
    window.meta2d.layout(pens, layoutConfig.width, layoutConfig.space);
  };
  return (
    <Collapse
      style={{ border: "none", borderRadius: 0, borderColor: "#000000" }}
      items={[
        {
          key: "LayoutProps",
          label: "布局",
          style: panelStyle,
          children: (
            <div style={{ padding: 10 }}>
              <Space direction="vertical" style={{ width: "100%" }}>
                <FormRowCol label="最大宽度">
                  <InputNumber
                    placeholder=""
                    className={"w-full"}
                    min={0}
                    value={layoutConfig.width}
                    onChange={(value) => {
                      setLayoutConfig((v) => {
                        return {
                          ...v,
                          width: value as number,
                        };
                      });
                    }}
                  />
                </FormRowCol>
                <FormRowCol label="间隔">
                  <InputNumber
                    placeholder=""
                    className={"w-full"}
                    value={layoutConfig.space}
                    onChange={(value) => {
                      setLayoutConfig((v) => {
                        return {
                          ...v,
                          space: value as number,
                        };
                      });
                    }}
                  />
                </FormRowCol>
                <Button
                  type={"primary"}
                  block
                  className={"w-full"}
                  onClick={handleLayout}
                >
                  开始排版
                </Button>
              </Space>
            </div>
          ),
        },
      ]}
      defaultActiveKey={["LayoutProps"]}
    />
  );
}
